<template>
    <div class="app-container">
        <!--工具条-->
        <el-row style="padding-bottom: 0;">
            <el-col :span="24" class="toolbar">
                <el-form :inline="true" :model="filters" ref="filterForm">
                    <el-form-item label="文章名称" >
                        <el-input v-model="filters.articleName" ></el-input>
                    </el-form-item>
                    <el-form-item label="文章编码" >
                        <el-input v-model="filters.articleEncoding" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" v-on:click="handleSearch('filterForm')">搜索</el-button><!-- <v-hasRole="'query'" -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="toolbar">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button  type="primary" size="small" @click="addLen">新增分类</el-button><!-- <v-hasRole="'add'" -->
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--工具条结束-->
        <!--列表开始-->
        <el-table :data="pagination.records" style="width: 100%;margin-bottom: 20px;" row-key="id" :height="heightNum" highlight-current-row v-loading="isLoading" border default-expand-all>
            <el-table-column label="分类" width="250">
                <template scope="scope">
                    <el-input size="mini" v-show="scope.row.addTable" v-model="scope.row.primaryClassification" placeholder="请输入分类名称"></el-input>
                    <span v-show="!scope.row.addTable">{{scope.row.primaryClassification}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="articleName" label="文章名称" ></el-table-column>
            <el-table-column prop="articleEncoding" label="文章编码"></el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">
                        {{scope.row.createTime}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="生效时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column label="首页显示">
                <template slot-scope="scope" v-if="scope.row.type == 1">
                    {{scope.row.homePageDisplay == 0?"是":"否"}}
                </template>
            </el-table-column>
            <el-table-column prop="sortNumber" label="排序"></el-table-column>
            <el-table-column label="操作" min-width="130" >
                <template slot-scope="scope">
                    <el-button  @click="addClass(scope.row)" v-show="scope.row.addTable" type="success" size="small">保存分类</el-button>
                    <el-button  @click="handleAdd(scope.row)" v-if="scope.row.type == 0" type="success" size="small">新增文章</el-button>
                    <el-button  @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.type == 1" type="primary" size="small">编辑</el-button>
                    <el-button  @click="deleteArticle(scope.row)" type="danger"  size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页开始-->
        <div class="pagination" v-if='pagination.total > 0'>
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           :current-page.sync="pagination.current"
                           @current-change="handleCurrentChange"
                           :page-size="size" :page-sizes="[10, 20, 50, 100]"
                           :total="pagination.total" style="float:right;">
            </el-pagination>
        </div>

        <!--分页结束-->

        <!--新增/修改开始-->
        <section>
            <!--新增|编辑 界面-->
            <el-dialog :title="formObj.title" :visible.sync="formObj.formVisible" :close-on-click-modal="false" >
                <el-form  :model="formObj.formModel" class="demo-form-inline" :rules="rules" :inline="true" v-loading="tabIsLoading"
                          label-width="100px" label-position="right" ref="mailForm">
                    <el-form-item label="文章名称" prop="articleName">
                        <el-input v-model="formObj.formModel.articleName" placeholder="请输入内容" ></el-input>
                    </el-form-item>
                    <el-form-item label="首页显示" prop="homePageDisplay">
                        <el-radio-group v-model="formObj.formModel.homePageDisplay">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="有效时间" prop="periods">
                        <el-date-picker v-model="formObj.formModel.periods" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                                        :default-time="['00:00:00', '23:59:59']" start-placeholder="开始日期"
                                        range-separator="-" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="文章内容" prop="articleContent">
                        <tinymce :height="300" v-model="formObj.formModel.articleContent"></tinymce>
                    </el-form-item>
                </el-form>
                <div v-if="formObj.title !== '查看'" slot="footer" class="dialog-footer">
                    <el-button @click.native="handleClose('mailForm')">取消</el-button>
                    <el-button type="primary" @click.native="handleSubmit('mailForm')">提交
                    </el-button>
                </div>
            </el-dialog>
        </section>
        <!--新增/修改结束-->
    </div>
</template>

<script>
    import moment from "moment";
    import http from '../../../axios/http';
    import {isNotEmpty,isEmpty} from "../../../filter";

    export default {
        name: 'floorInfo',
        data() {
            return {
                filters:{
                    articleName:null,
                    articleEncoding:null,
                },
                pagination: {
                    total: 0,
                    current: 1,
                    records: []
                },
                heightNum: null,
                size: 20,
                isLoading: false,
                tabIsLoading: false,
                formObj: {
                    title: null,
                    formModel: {
                        parentId:null,
                        articleName:null,
                        homePageDisplay:0,
                        periods: [],
                        articleContent:null,
                    },
                    formVisible: false//编辑界面是否显示
                },
                rules: {
                    articleName: [
                        {required: true, message: '请输入文章名称', trigger: 'blur'},
                    ],
                    articleContent: [
                        {required: true, message: '请输入文章内容', trigger: 'blur'},
                    ],
                    periods: [
                        {type: "array", required: true, message: '请选择生失效时间', trigger: 'change'}
                    ],
                    homePageDisplay: [
                        {required: true, message: '请选择状态', trigger: 'change'},
                    ],
                },
            }
        },
        methods: {
            loadPagination() {
                const self = this;
                window.console.log("this.pagination.page:" + self.pagination.page);
                let params = {
                    page: this.pagination.current === 0 ? 1 : this.pagination.current,
                    size: this.size === 0 ? 20 : this.size
                };
                if(isNotEmpty(this.filters.articleName)){
                    params['search_like_articleName'] = this.filters.articleName;
                }
                if(isNotEmpty(this.filters.articleEncoding)){
                    params['search_like_articleEncoding'] = this.filters.articleEncoding;
                }
                window.console.log("params" + JSON.stringify(params));
                self.isLoading = true;
                http.get("api/articleInfo", {params:params}).then(response => {
                    this.isLoading = false;
                    let current = this.pagination.current;
                    this.pagination = response;
                    this.pagination.current = current;
                });
            },
            handleSearch(ref) {
                this.$refs[ref].validate((valid) => {
                    if (valid) {
                        this.handleCurrentChange(1);
                    }
                });
            },

            //新增行
            addLen(){
                var d = {id:"",addTable:true};
                this.pagination.records.push(d);
                setTimeout(() => { this.$refs.pagination.records.setCurrentRow(d); }, 10);
            },

            addClass(row){
               http.get("api/articleInfo/addClass/"+row.primaryClassification).then(response =>{
                   if(response.code === 200){
                       this.loadPagination();
                       this.$message.success(response.msg);
                   }else {
                       this.$message.warning(response.msg);
                   }
               })
            },

            //提交表单
            handleSubmit(ref) {
                console.log("提交表单");
                this.$refs[ref].validate((valid) => {
                    if (valid) {
                        let params = {
                            parentId:this.formObj.formModel.parentId,
                            articleName:this.formObj.formModel.articleName,
                            homePageDisplay:this.formObj.formModel.homePageDisplay,
                            startTime: this.formObj.formModel.periods[0],
                            endTime:this.formObj.formModel.periods[1],
                            articleContent:this.formObj.formModel.articleContent,
                        }
                        if(this.formObj.formModel.id){
                            params["id"] = this.formObj.formModel.id
                            http.put("api/articleInfo",params).then(response =>{
                                if(response.code === 200){
                                    this.$message.success(response.msg);
                                    this.formObj.formVisible = false;
                                    this.loadPagination();
                                }else {
                                    this.$message.warning(response.msg);
                                }
                            })
                            return;
                        }
                        http.post("api/articleInfo",params).then(response =>{
                            if(response.code === 200){
                                this.$message.success(response.msg);
                                this.formObj.formVisible = false;
                                this.loadPagination();
                            }else {
                                this.$message.warning(response.msg);
                            }
                        })
                    }
                });
            },


            //删除
            deleteArticle(row){
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    http.delete("api/articleInfo/"+row.id).then(response =>{
                        if(response.code === 200){
                            this.$message.success(response.msg);
                            this.loadPagination();
                        }else {
                            this.$message.warning(response.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },

            handleAdd(row) {//打开新增界面home
                this.isLoading = false;
                this.formObj = {
                    title: '新增',
                    formVisible: true,
                    formModel: {
                        parentId:row.id,
                        articleName:null,
                        homePageDisplay:0,
                        periods: [],
                        articleContent:null,
                    }
                };
            },

            handleEdit(index, row) {//打开编辑界面
                this.isLoading = false;
                this.formObj = {
                    title: '编辑',
                    action: 'update',
                    formVisible: true,
                    formModel: Object.assign({}, row)
                };
                let time = [];
                time[0] = row.startTime;
                time[1] = row.endTime;
                this.formObj.formModel.periods = time
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size = val;
                this.loadPagination();
            },
            handleCurrentChange(val) {
                window.console.log('this.pagination.page:' + val);
                this.pagination.current = val;
                window.console.log('排序动作:' + this.sort);
                this.loadPagination();
            },
            handleClose(ref) {//关闭表单
                this.formObj.formVisible = false;
                this.$refs[ref].resetFields();
                //this.handleReset(ref);
            },
            // 计算table高度
            initData() {
                let self = this;
                // 2.0版本特殊处理
                setTimeout(function () {
                    self.heightNum = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 200 + "px";
                },10);
                // 响应窗口大小改变
                window.onresize = function () {
                    self.heightNum = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 200 + "px";
                };
            },
        },
        mounted() {
            this.initData();
            this.loadPagination();
        },
    }
</script>

